@use "@/assets/styles/var.scss";

page,
view,
text {
    font-family: $tts-font-family;
}

.safe-area-inset-bottom-iphonex {
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.safe-area-inset-bottom {
    padding-bottom: 20px !important;
}

.d-flex {
    display: flex;
}

.d-align-center {
    align-items: center;
}

@mixin size($size) {
    width: $size;
    height: $size;
}

$spacing-types: (
        "m": "margin",
        "p": "padding"
);

$directions: (
        "": "", // 用于 `m-` 和 `p-`（四边）
        "t": "top",
        "b": "bottom",
        "l": "left",
        "r": "right",
);

@each $prefix, $property in $spacing-types {
    @each $abbr, $direction in $directions {
        @for $i from 1 through 3 {
            $gap-unit: $tts-base-unit * $i;
            .#{$prefix}#{$abbr}-#{$i} {
                @if $direction == "" {
                    #{$property}: $gap-unit !important;
                } @else {
                    #{$property}-#{$direction}: $gap-unit !important;
                }
            }
        }
    }
}

@for $i from 1 through 3 {
    $gap-unit: $tts-base-unit * $i;
    .gap-#{$i} {
        grid-gap: $gap-unit;
    }
}

.inset-0 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fixed-header {
    z-index: $tts-header-z-index;
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    background-color: white;
}
.row {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: $tts-space-a-sm;
}
.common-header {
    position: relative;
    width: 750px;
    overflow: hidden;

    @mixin gradient-overlay($translateX, $translateY, $color, $opacity: 0.5) {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: " ";
        transform: translateX($translateX) translateY($translateY);
        display: inline-block;
        width: 100%;
        background: radial-gradient(
                        ellipse at top center,
                        $color 0%,
                        rgba(255, 255, 255, 0) 40%
        );
        opacity: $opacity;
    }

    &::before {
        @include gradient-overlay(20%, -10%, $tts-sub-mint);
        animation: gradient-left 80s ease infinite;
    }

    &::after {
        animation: gradient-right 80s ease infinite;
        @include gradient-overlay(-20%, -10%, $tts-sub-sand);
    }

    @keyframes gradient-right {
        0% {
            transform: translateX(-20%) translateY(-10%);
        }

        50% {
            transform: translateX(30%) translateY(0);
        }

        100% {
            transform: translateX(-20%) translateY(-10%);
        }
    }

    @keyframes gradient-left {
        0% {
            transform: translateX(20%) translateY(-10%);
        }

        50% {
            transform: translateX(-30%) translateY(0);
        }

        100% {
            transform: translateX(20%) translateY(-10%);
        }
    }

    > .header-content {
        z-index: 1;
        position: relative;
    }

    .tab-wrap {
        display: flex;
        justify-content: space-between;
    }
}

$h-size: (
        "h1": "52px",
        "h2": "40px",
        "h3": "36px",
        "h4": "32px",
        "h5": "28px",
        "h6": "26px",
        "main": "26px",
        "assist": "20px"
);

@each $h, $size in $h-size {
    .tts-text-#{$h} {
        font-size: #{$size};
        line-height: 1.8;
    }
}

$text-align: left, right, center;

@each $align in $text-align {
    .tts-text-#{$align} {
        text-align: #{$align};
    }
}

.cell-input {
    font-size: 26px;
}

.footer-content {
    padding: $tts-space-a-sm;
}

.icon-image {
    width: 100%;
    height: 100%;
}

.tts-bg-white {
    background-color: white;
}
